<template>
    <div class="home">
        <div class="body">
            <div class="title">叫料单</div>
            <div class="tool" style="text-align:left;">
                <el-button type="primary" @click="addInfo()">手动叫料</el-button>
            </div>
            <el-table
                :data="listInfo"
                :row-style="tableRowStyle"
                :header-cell-style="tableHeaderColor"
                highlight-current-row
                style="width: 100%;font-size:16px;margin-top:10px;"
                height="14rem"
            >
                <el-table-column label="序号" width="80" align="center">
                <template slot-scope="scope">{{scope.$index+1}}</template>
                </el-table-column>
                <el-table-column prop="RequisitionType" label="类型" align="center">
                    <template slot-scope="scope">{{scope.row.RequisitionType===1?'计划叫料':'临时叫料'}}</template>
                </el-table-column>
                <el-table-column prop="MaterielTypeNames" label="需求类型" width="200" align="center"></el-table-column>
                <el-table-column prop="MaterielName" label="款式" width="250" align="center"></el-table-column>
                <el-table-column prop="BomColorName" label="颜色" width="170" align="center"></el-table-column>
                <el-table-column prop="BomSpecName" label="尺码" width="170" align="center"></el-table-column>
                <el-table-column prop="CreateTime" label="叫料时间" width="150" align="center">
                    <template slot-scope="scope">{{$moment(scope.row.CreateTime).format('YYYY-MM-DD HH:mm')}}</template>
                </el-table-column>
                <el-table-column prop="DeliveryTime" label="需求时间" width="150" align="center">
                    <template slot-scope="scope">{{$moment(scope.row.DeliveryTime).format('YYYY-MM-DD HH:mm')}}</template>
                </el-table-column>
                <el-table-column prop="PlanDeliveryCount" label="叫料数（套）" width="120" align="center"></el-table-column>
                <el-table-column prop="RealDeliveryCount" label="安排数" width="100" align="center"></el-table-column>
                <el-table-column prop="SelfCount" label="框数" width="150" align="center"></el-table-column>
                <el-table-column prop="DictCodeName" label="状态" width="150" align="center"></el-table-column>
                <el-table-column prop="Status" label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="viewInfo(scope.$index)">查看</el-link>
                        <el-link type="primary" @click="cancleInfo(scope.$index)" v-if="scope.row.Status===175001" style="margin-left:10px;">撤销</el-link>
                    </template>
                </el-table-column>
          </el-table>
          <!-- v-if="Math.ceil(totalCount/pageSize)>1" -->
          <el-pagination 
                background
                layout="prev, pager, next"
                :total="totalCount"
                :current-page.sync="currentPage"
                :page-size="pageSize"
                @current-change="changePage()"
                style="margin:20px 0;"
            ></el-pagination>
        </div>

        <!-- 选择制令弹出框 -->
        <div class="dialogBox-w" v-show="dialogTaskShow">
            <div class="dialogBox" >
                <div>
                    <div class="title">叫料信息</div>
                    <div class="close">
                        <div class="el-icon-circle-close icon" @click="dialogTaskShow = false"/>
                    </div>
                </div>
                <div class="block-w" style="height:10rem;margin-bottom:0">
                    <div>
                        <!-- <span>叫料单（45176315315215215211）</span> -->
                        <span class="status" style="color:#fff" v-if="status===175001" v-html="dictCodeName"></span>
                        <span class="status" style="color:#49b904" v-if="status===175002" v-html="dictCodeName"></span>
                        <span class="status" style="color:#16a9ed" v-if="status===175003" v-html="dictCodeName"></span>
                        <span class="status" style="color:#e5ed16" v-if="status===175004" v-html="dictCodeName"></span>
                        <span class="status" style="color:#ed1616" v-if="status===175005" v-html="dictCodeName"></span>
                        <span class="status" style="color:#d1d1d1" v-if="status===175006" v-html="dictCodeName"></span>
                    </div>
                    <table class="add">
                        <tr>
                            <td style="width:130px;text-align:right;">款式：</td>
                            <td>
                                <ul class="addul">
                                    <li v-bind:class="{'active':styleIndex===index}" v-for="(item,index) in styleList" :key="index" @click="changeStyle(index)">{{item.MaterielName}}</li>
                                </ul>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align:right;">型号：</td>
                            <td>
                                <ul class="addul">
                                    <li v-bind:class="{'active':modelIndex===index}" v-for="(item,index) in modelList" :key="index" @click="changeModel(index)">{{item.Name}}</li>
                                </ul>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align:right;">规格：</td>
                            <td>
                                <ul class="addul">
                                    <li v-bind:class="{'active':specIndex===index}" v-for="(item,index) in specList" :key="index" @click="changeSpec(index)">{{item.Name}}</li>
                                </ul>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align:right;">叫料类型：</td>
                            <td>
                                <ul class="addul">
                                    <li v-bind:class="{'active':materielIndex.indexOf(item.code)>-1}" v-for="(item,index) in materielList" :key="index" @click="changeMateriel(index)">{{item.name}}</li>
                                </ul>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align:right;">叫料套数：</td>
                            <td>
                                <ul class="addul">
                                    <li @click="changeSets(-100)">-100</li>
                                    <li @click="changeSets(-10)">-10</li>
                                    <li @click="changeSets(-1)">-1</li>
                                    <li class="noclass"><el-input-number size="large" v-model="setsNum" :min="1" :max="1000000000"></el-input-number></li>
                                    <li @click="changeSets(1)">+1</li>
                                    <li @click="changeSets(10)">+10</li>
                                    <li @click="changeSets(100)">+100</li>
                                </ul>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align:right;">需求日期：</td>
                            <td>
                                <ul class="addul">
                                    <li v-bind:class="{'active':dateIndex===0}" @click="changeDate(0)">今天</li>
                                    <li v-bind:class="{'active':dateIndex===1}" @click="changeDate(1)">明天</li>
                                </ul>
                                <span v-html="requireDate" style="float: left;line-height: 40px;"></span>
                            </td>
                        </tr>
                        <tr>
                            <td style="width:130px;text-align:right;">需求时间：</td>
                            <td style="padding:5px 0;">
                                <!-- <el-input-number size="large" v-model="requireNum" :min="1" :max="24" @change="handleChange"></el-input-number>
                                <span style="margin-left: 10px;"></span> -->
                                <!-- v-html="requireTime" -->
                                <el-time-select
                                    placeholder="请选择需求时间"
                                    v-model="timeselect"
                                    :clearable="false"
                                    @change="handleChange"
                                    :picker-options="{
                                    start: '08:00',
                                    step: '00:10',
                                    end: '23:00'
                                    }">
                                </el-time-select>
                            </td>
                        </tr>
                        <tr v-if="isView">
                            <td style="text-align:right;">物流信息：</td>
                            <td style="padding:5px 0;">
                                <el-timeline :reverse="true" style="margin-top:10px;" v-if="activities.length>0">
                                    <el-timeline-item
                                    v-for="(activity, index) in activities"
                                    :key="index"
                                    :timestamp="activity.InventoryTime">
                                    {{activity.MaterielName+'['+activity.ColorConfigName+' '+activity.SpecConfigName+']'+activity.StockWorkName}}
                                    </el-timeline-item>
                                </el-timeline>
                                <div v-if="activities.length<=0">暂无数据</div>
                                <!-- <ul style="font-size: 0.35rem;">
                                    <li v-for="(item,index) in activities" :key="index">
                                        <div>{{item.MaterielName+'('+item.ColorConfigName+' '+item.SpecConfigName+')'+item.StockWorkName}}</div>
                                        <div>{{item.InventoryTime}}</div>
                                    </li>
                                </ul> -->
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="footer">
                    <el-button class="button" style="margin-right:1rem;" @click="dialogTaskShow=false">取消</el-button>
                    <el-button class="button" type="primary" @click="save()" v-if="!isView">确定</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Mixin from '@/components/mixin' // 混入
import {GetMaterialRequisition, GetStyleByOrgID, GetColorSpecByStyleID, AddMaterialRequisition, GetMaterialRequisitionByID
, UpdateMaterialRequisitionByID} from '@/api/prison' // 接口
export default {
  name: 'proorder',
  data () {
    return {
      listInfo: [],
      totalCount: 0,
      currentPage: 1,
      pageSize: 20,
      dialogTaskShow: false,
      styleList: [],
      styleIndex: -1,
      modelList: [],
      modelIndex: -1,
      specList: [],
      specIndex: -1,
      materielList: [{name: '裁片', code: 'C'}, {name: '面料', code: 'M'}, {name: '辅料', code: 'F'}],
      materielIndex: '',
      materielName: [],
      setsNum: 1,
      requireNum: 10,
      activities: [],
      requireDate: '',
      dateIndex: -1,
      requireTime: '',
      materielFullCode: '',
      customFlnkID: '',
      isView: false,
      dictCodeName: '',
      status: '',
      timeselect: '10:00'
    }
  },
  mixins: [Mixin],
  methods: {
    // 修改table tr行的背景色
    tableRowStyle ({ row, rowIndex }) {
      return {
        backgroundColor: 'rgb(0, 63, 140)',
        color: '#fff',
        fontWeight: 'bold',
        height: '0.7rem',
        fontSize: '15px'
      }
    },
    // 修改table header的背景色
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: rgb(0, 63, 140);color: #fff;font-weight: bold;height:0.7rem;font-size:15px'
      }
    },
    // 撤销
    cancleInfo (index) {
      let vm = this
      this.$confirm('确认撤销吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = new FormData()
        params.append('FlnkID', vm.listInfo[index].FlnkID)
        UpdateMaterialRequisitionByID(params).then((response) => {
          if (response.data.result) {
            vm.$message('撤销成功')
            vm.GetMaterialRequisition()
          } else {
            vm.$message(response.data.error)
          }
        })
      }).catch(() => {

      })
    },
    // 查看
    viewInfo (indexs) {
      let vm = this
      vm.isView = true
      vm.dialogTaskShow = true
      vm.clear()
      let params = new FormData()
      params.append('OrgID', localStorage.getItem('OrgID'))// localStorage.getItem('OrgID')
      GetStyleByOrgID(params).then((response) => {
        if (response.data.result) {
          if (response.data.data != null &&
            response.data.data.length > 0) {
            vm.styleList = response.data.data
            if (vm.styleList.length > 0) {
              if (!vm.isView) { vm.styleIndex = 0 } else { vm.styleIndex = -1 }

              let params1 = new FormData()
              params1.append('StyleID', vm.listInfo[indexs].StyleFlnkID)
              GetColorSpecByStyleID(params1).then((response) => {
                if (response.data.result) {
                  if (response.data.data != null) {
                    var info = response.data.data
                    // 款编号
                    vm.materielFullCode = info.MaterielFullCode
                    vm.customFlnkID = info.CustomFlnkID
                    // 颜色
                    var colorID = info.ColorConfigIDs.split(',')
                    var colorName = info.ColorConfigNames.split(',')
                    vm.modelList = []
                    colorID.forEach(function (item, index) {
                      vm.modelList.push({
                        ID: colorID[index],
                        Name: colorName[index]
                      })
                    })
                    // 规格
                    var specID = info.SpecConfigIDs.split(',')
                    var specName = info.SpecConfigNames.split(',')
                    vm.specList = []
                    specID.forEach(function (item, index) {
                      vm.specList.push({
                        ID: specID[index],
                        Name: specName[index]
                      })
                    })

                    vm.getInfoByIndex(indexs)
                  } else {
                    vm.modelList = []
                    vm.specList = []
                  }
                }
              })
            }
          } else {
            vm.styleList = []
          }
        }
      })
    },
    getInfoByIndex (index) {
      let vm = this
      let params = new FormData()
      params.append('FlnkID', vm.listInfo[index].FlnkID)
      GetMaterialRequisitionByID(params).then((response) => {
        if (response.data.result) {
          if (response.data.data != null) {
            var info = response.data.data
            vm.dictCodeName = info.DictCodeName
            vm.status = info.Status
            vm.styleIndex = vm.getArrayIndex(vm.styleList, info.StyleFlnkID, 1)
            vm.modelIndex = vm.getArrayIndex(vm.modelList, info.ColorConfigID, 0)
            vm.specIndex = vm.getArrayIndex(vm.specList, info.SpecConfigID, 0)
            vm.materielIndex = info.MaterielTypeCodes
            vm.setsNum = info.PlanDeliveryCount
            vm.activities = info.Log === null ? [] : info.Log
            var time = vm.$moment(info.DeliveryTime).format('YYYY-MM-DD HH:mm').split(' ')
            if (time.length > 1) {
              vm.requireNum = time[1].split(':')[0]
              vm.requireDate = time[0]
              vm.timeselect = time[1]
              vm.dateIndex = -1
              vm.requireTime = vm.$moment(info.DeliveryTime).format('YYYY-MM-DD HH:mm')
              if (vm.getDate() === time[0]) {
                vm.dateIndex = 0
              } else {
                vm.dateIndex = 1
              }
            }
          }
        }
      })
    },
    // 添加叫料
    addInfo () {
      let vm = this
      vm.dialogTaskShow = true
      vm.isView = false
      vm.clear()
      let params = new FormData()
      params.append('OrgID', localStorage.getItem('OrgID'))
      GetStyleByOrgID(params).then((response) => {
        if (response.data.result) {
          if (response.data.data != null &&
            response.data.data.length > 0) {
            vm.styleList = response.data.data
            if (vm.styleList.length > 0) {
              if (!vm.isView) { vm.styleIndex = 0 } else { vm.styleIndex = -1 }

              let params1 = new FormData()
              params1.append('StyleID', vm.styleList[0].FlnkID)
              GetColorSpecByStyleID(params1).then((response) => {
                if (response.data.result) {
                  if (response.data.data != null) {
                    var info = response.data.data
                    // 款编号
                    vm.materielFullCode = info.MaterielFullCode
                    vm.customFlnkID = info.CustomFlnkID
                    // 颜色
                    var colorID = info.ColorConfigIDs.split(',')
                    var colorName = info.ColorConfigNames.split(',')
                    vm.modelList = []
                    colorID.forEach(function (item, index) {
                      vm.modelList.push({
                        ID: colorID[index],
                        Name: colorName[index]
                      })
                    })
                    // 规格
                    var specID = info.SpecConfigIDs.split(',')
                    var specName = info.SpecConfigNames.split(',')
                    vm.specList = []
                    specID.forEach(function (item, index) {
                      vm.specList.push({
                        ID: specID[index],
                        Name: specName[index]
                      })
                    })
                  } else {
                    vm.modelList = []
                    vm.specList = []
                  }
                }
              })
            }
          } else {
            vm.styleList = []
          }
        }
      })
    },
    changeStyle (index) {
      let vm = this
      vm.styleIndex = index
      let params1 = new FormData()
      params1.append('StyleID', vm.styleList[index].FlnkID)
      GetColorSpecByStyleID(params1).then((response) => {
        if (response.data.result) {
          if (response.data.data != null && response.data.data !== undefined) {
                    // 款编号
            vm.materielFullCode = response.data.data.MaterielFullCode
            vm.customFlnkID = response.data.data.CustomFlnkID
                    // 颜色
            var colorID = response.data.data.ColorConfigIDs.split(',')
            var colorName = response.data.data.ColorConfigNames.split(',')
            vm.modelList = []
            colorID.forEach(function (item, index) {
              vm.modelList.push({
                ID: colorID[index],
                Name: colorName[index]
              })
            })
                    // 规格
            var specID = response.data.data.SpecConfigIDs.split(',')
            var specName = response.data.data.SpecConfigNames.split(',')
            vm.specList = []
            specID.forEach(function (item, index) {
              vm.specList.push({
                ID: specID[index],
                Name: specName[index]
              })
            })
          } else {
            vm.modelList = []
            vm.specList = []
          }
        }
      })
    },
    changeModel (index) {
      let vm = this
      vm.modelIndex = index
    },
    changeSpec (index) {
      let vm = this
      vm.specIndex = index
    },
    changeMateriel (index) {
      let vm = this
      if (vm.materielIndex.indexOf(vm.materielList[index].code) <= -1) {
        vm.materielIndex += vm.materielList[index].code
        vm.materielName.push(vm.materielList[index].name)
      } else {
        vm.materielIndex = vm.materielIndex.replace(vm.materielList[index].code, '')
        var temp = vm.materielName.indexOf(vm.materielList[index].name)
        vm.materielName.splice(temp, 1)
      }
    },
    changeDate (value) {
      let vm = this
      vm.dateIndex = value
      vm.requireDate = vm.getDate(value)
      vm.requireTime = vm.requireDate + ' ' + vm.timeselect// vm.requireNum + ':00'
    },
    handleChange (value) {
      let vm = this
      if (vm.requireDate === '') {
        vm.$message('请选择需求日期')
      } else {
        vm.requireTime = vm.requireDate + ' ' + value + ':00'
      }
    },
    changeSets (value) {
      let vm = this
      vm.setsNum += value
      if (vm.setsNum < 0) {
        vm.setsNum = 1
      }
    },
    // 页面列表
    GetMaterialRequisition () {
      let vm = this
      let params = new FormData()
      params.append('OrgID', localStorage.getItem('OrgID'))
      params.append('PageIndex', vm.currentPage - 1)
      params.append('PageSize', vm.pageSize)
      GetMaterialRequisition(params).then((response) => {
        if (response.data.result) {
          if (response.data.data != null &&
            response.data.data.length > 0) {
            vm.listInfo = response.data.data
            vm.totalCount = response.data.count
          } else {
            vm.listInfo = response.data.data
            vm.totalCount = response.data.count
          }
        }
      })
    },
    changePage () {
      let vm = this
      vm.GetMaterialRequisition()
    },
    // 保存
    save () {
      let vm = this
      if (vm.modelIndex === -1) {
        vm.$message('请选择型号')
        return
      }
      if (vm.specIndex === -1) {
        vm.$message('请选择规格')
        return
      }
      if (vm.materielIndex === '') {
        vm.$message('请选择叫料类型')
        return
      }
      if (vm.dateIndex === -1) {
        vm.$message('请选择需求日期')
        return
      }
      let params = new FormData()
      params.append('FlnkID', '00000000-0000-0000-0000-000000000000')
      params.append('CustomerFlnkID', vm.customFlnkID)
      params.append('OrderOuterCode', vm.materielFullCode)
      params.append('StyleFlnkID', vm.styleList[vm.styleIndex].FlnkID)
      params.append('ColorConfigID', vm.modelList[vm.modelIndex].ID)
      params.append('SpecConfigID', vm.specList[vm.specIndex].ID)
      params.append('MaterielTypeCodes', vm.materielIndex.split('').join(','))
      params.append('MaterielTypeNames', vm.materielName.join(','))
      params.append('OrgID', localStorage.getItem('OrgID'))
      params.append('DeliveryTime', vm.requireTime)
      params.append('PlanDeliveryCount', vm.setsNum)
      AddMaterialRequisition(params).then((response) => {
        if (response.data.result) {
          vm.$message('保存成功')
          vm.dialogTaskShow = false
          vm.GetMaterialRequisition()
          vm.clear()
        } else {
          vm.$message(response.data.error)
        }
      })
    },
    getArrayIndex (arr, value, type) {
      var result = -1
      arr.forEach(function (item, index) {
        if (type === 0) {
          if (value === item.ID) { result = index }
        } else {
          if (value === item.FlnkID) { result = index }
        }
      })
      return result
    },
    // 恢复默认
    clear () {
      let vm = this
      vm.styleList = []
      vm.styleIndex = -1
      vm.modelList = []
      vm.modelIndex = -1
      vm.specList = []
      vm.specIndex = -1
      vm.materielIndex = ''
      vm.materielName = []
      vm.setsNum = 1
      vm.requireNum = 10
      vm.activities = []
      vm.requireDate = ''
      vm.dateIndex = -1
      vm.requireTime = ''
      vm.materielFullCode = ''
      vm.customFlnkID = ''
    }
  },
  mounted () {
    let vm = this
    vm.GetMaterialRequisition()
  }
}
</script>
<style lang="scss" scoped>
@import "~@/css/common.scss";
</style>
<style lang="scss">
.el-input-number__decrease,.el-input-number__increase{
    height: 0.65rem;
    margin-top: 0.09rem;
    .el-icon-minus,.el-icon-plus{
        line-height: 0.65rem !important;
    }
}
.el-input-number .el-input{
    margin-top: 0.09rem !important;
}
.el-input__inner{
    height: 0.67rem !important;
}
.el-link.el-link--primary{
    font-size: 0.3rem;
}
.el-timeline-item__content{
    font-size: 0.35rem;
    color: #fff;
    opacity: 1;
}
.el-timeline-item__timestamp{
    font-size: 0.30rem;
    color: #fff;
}
</style>